<template>
    <div>
        <el-form ref="stepOne_form" :model="stepOne_form" size="small" status-icon :rules="stepOne_rules" label-width="130px" v-show="step === 0 || isEdit">
            <el-form-item label="放盘名称/批次：" prop="open_name">
                <el-input v-model="stepOne_form.open_name"></el-input>
            </el-form-item>
            <el-form-item label="项目名称：" prop="project_id">
                <el-select v-model="stepOne_form.project_id" @change="getBuildings" :disabled="isEdit">
                    <el-option v-for="item in projects" :key="item.project_id" :label="item.project_name" :value="item.project_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="楼宇名称：" prop="building_id">
                <el-select v-model="stepOne_form.building_id" @change="changeBuilding" :disabled="isEdit">
                    <el-option v-for="item in building" :key="item.building_id" :label="item.building_name" :value="item.building_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适用销售流程：" prop="process_type">
                <el-select v-model="stepOne_form.process_type">
                    <el-option label="产业楼销售流程" value="0"></el-option>
                    <el-option label="住宅楼销售流程" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="stepOne_next()" v-if="!isEdit">下一步</el-button>
            </el-form-item>
        </el-form>
        <div v-show="step === 1 || isEdit">
            <div class="selling_rooms">
                <ul class="statusTag">
                    <li><i class="el-icon-web-stop" style="color: #fff;"></i> 未放盘</li>
                    <li><i class="el-icon-web-stop" style="color: #ddd;"></i> 已放盘</li>
                    <li><i class="el-icon-web-stop" style="color: #409EFF;"></i> 可售</li>
                    <li><i class="el-icon-web-stop" style="color: #67c23a;"></i> 预留</li>
                </ul>
                <div class="selling_rooms_list">
                    <table class="selling_table">
                        <thead>
                            <tr>
                                <th>
                                    <el-checkbox v-show="checkAllIsShow" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                </th>
                                <th colspan="999">{{build_name}}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="lists in roomList">
                                <td>
                                    <el-checkbox v-model="checkedTr" :label="lists.floor_id" :key="lists.floor_id" name="floor" @change="handleCheckedTrChange">{{lists.floor_name}}</el-checkbox>
                                </td>

                                <!-- status/* 状态 0-未放盘 1-可售 2-预留 3.disabled-已放盘 */  -->
                                <!-- 渲染数据时，将状态1-可售 2-预留 均标记为 3.disabled  -->
                                <td
                                v-for="list in lists.rooms"
                                :class="{'active': list.active === true, 'room': list.open_status !== 3, 'status0': list.open_status === 0, 'status1': list.open_status === 1, 'status2': list.open_status === 2, 'disabled': list.open_status === 3}"
                                @click="checkedRoom(list)"
                                >

                                    <p>{{list.room_name}}</p>
                                    <em>￥{{list.guide_price}}</em>
                                </td>
                                <!-- 房间数量不够 空 td 来凑 -->
                                <td v-for="list in (roomMaxLength - lists.rooms.length)"></td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="m-t">
                <el-button size="mini" type="primary" plain :disabled="disabled.is_sale" @click="isSale()">标记为可售</el-button>
                <el-button size="mini" type="success" plain :disabled="disabled.is_reserve"  @click="isReserve()">标记为预留</el-button>
                <el-button size="mini" type="warning" plain :disabled="disabled.is_cancel"  @click="isCancel()">取消放盘</el-button>
            </div>
            <div class="m-t">
                <el-button type="primary" @click="stepTwo_save()">保存并发布放盘</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        var checkAmount = (rule, value, callback) => {
            setTimeout(() => {
                var isInteger = /^[1-9]\d*$/;
                if (!isInteger.test(value)) {
                    callback(new Error('请输入正整数'));
                } else {
                    callback();
                }
            },1000);
        };
        return {
            step: 0, // 步骤
            isEdit: false, // 是否编辑模式
            stepOne_form: {
                open_name: '',
                project_id: '',
                project_name: '',
                building_id: '',
                building_name: '',
                process_type: ''
            },
            stepOne_rules: {
                open_name: [
                    { required: true, message: '请填写放盘名称/批次', trigger: 'blur' }
                ],
                project_id: [
                    { required: true, message: '请选择放盘项目', trigger: 'change' }
                ],
                building_id: [
                    { required: true, message: '请选择放盘楼宇', trigger: 'change' }
                ],
                process_type: [
                    { required: true, message: '请选择适用销售流程', trigger: 'change' }
                ]
            },
            checkAll: false, // 全选
            checkAllIsShow: true,
            checkedTr: [], // 已选中的楼层id
            checkedTrAll: [],
            isIndeterminate: false,
            build_name: '',
            roomMaxLength: 0,
            roomSelected: [], // 选中的房间ID
            roomList: [],
            disabled: {
                is_sale: true, // 可售按钮
                is_reserve: true, // 预留按钮
                is_cancel: true // 取消放盘
            },
            projects: [], // 项目
            building: [] // 楼宇列表
        }
    },
    props: {
        editObj: {
            type: Object
        }
        // 这里明天要传 open_id(id)，open_name, project_id，building_id，process_type
    },
    created() {
        let _this = this;
        this.$https.all([
            this.getProjects()
        ]).then(this.$https.spread(function (acct, perms) {
            if (_this.editObj) { // 编辑
                _this.setOldData();
            }
        }))
    },
    watch: {
        checkedTr: function(newVal, oldVal) { // 监听选中层
            // if(newVal.length===0){this.checkAll = false;}
            let c = this.ArrExcept(newVal, oldVal);
            if (newVal.length > oldVal.length) { // 判断数据 新增
                // 选中层 增加，给增加的 层给选中状态 active
                this.checkedTrActive(c, true);
            } else if (newVal.length < oldVal.length){
                // 选中层减少 ， 给减少 的层 取消选中状态 active
                this.checkedTrActive(c, false);
            }
        },
        roomList: {
            handler: function(newVal, oldVal) {
                for (let floor of this.roomList) { // 遍历楼宇
                    let optionalN = 0; // status !== 3 统计可选择的块数量
                    let activeN = 0; // 统计已选中的个数
                    for (let room of floor.rooms) {

                        if (room.open_status !== 3) {
                            optionalN ++

                            let selegth = this.roomSelected.length + 1;
                            // 1.判断 val 是否存在选中的数组中
                            let index_of = this.roomSelected.indexOf(room, -selegth);

                            if (room.active) {
                                activeN ++

                                if (index_of === -1 ) { 
                                    // 已选中的 不存在选中数组中
                                    this.roomSelected.push(room);
                                }

                            } else {
                                // 未选择的存在数组中，则删
                                if (index_of !== -1 ) { 
                                    // 已选中的 不存在选中数组中
                                    this.roomSelected.splice(index_of, 1);
                                }
                            }
                        }
                        
                    }
                    let arrayL = this.checkedTr.length + 1;
                    let arrayIndex = this.checkedTr.indexOf(floor.floor_id, -arrayL );
                    if (optionalN > 0 && optionalN === activeN) {
                        // console.log('当前行全选中')
                        if (arrayIndex === -1 ) {
                            this.checkedTr.push(floor.floor_id)
                        }
                    } else {
                        // console.log('当前行未全选')
                        if (arrayIndex !== -1 ) {
                            this.checkedTr.splice(arrayIndex, 1)
                        }
                    }
                }
            },
            deep: true
        },
        roomSelected: function(newVal, oldVal) { // 监听选中层
            if (newVal.length === 0) { // 当前无选中的房间
                this.disabled.is_sale = true;
                this.disabled.is_reserve = true;
                this.disabled.is_cancel = true;
            } else {
                this.disabled.is_sale = false;
                this.disabled.is_reserve = false;
                this.disabled.is_cancel = false;
                for (let room of newVal) { // 遍历房间
                    if (room.open_status === 0) { // 如果有房间的状态为 0 未放盘，那就不能取消放盘
                        this.disabled.is_cancel = true;
                    } else if (room.open_status === 1) { // 如果有房间的状态为1可售，那就不能标记为可售
                        this.disabled.is_sale = true;
                    } else if (room.open_status === 2) { // 如果有房间的状态为2 预留，那就不能标记为预留
                        this.disabled.is_reserve = true;
                    }
                }
            }
        },
        checkedTrAll: function(newVal, oldVal) { // 监听选中层
            console.log('all数据变了', newVal, oldVal)
        }
    },
    methods: {
        setOldData() {
            this.stepOne_form.open_name = this.editObj.open_name; // 
            this.stepOne_form.project_id = this.editObj.project_id; // 
            this.stepOne_form.process_type = this.editObj.process_type.toString(); // 

            
            let _this = this;
            this.$https.all([
                this.getBuildings(this.editObj.project_id)
            ]).then(this.$https.spread(function (acct, perms) {
                _this.stepOne_form.building_id = _this.editObj.building_id;
                _this.changeBuilding(_this.stepOne_form.building_id);
                _this.isEdit = true;
                _this.step = 1;
                _this.getList()
            }))
        },
        stepOne_next() { // 下一步
            this.$refs['stepOne_form'].validate((valid) => {
                if (valid) {
                    // 查询楼盘状态
                    this.$https.get('/api/pms_sale_open/QueryOpenStatus', {
                        params: {
                            building_id: this.stepOne_form.building_id,
                        }
                    }).then((result) => {
                        if (result.data.code == 0) {
                            this.step = 1;
                            this.getList();
                        } else {
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: result.data.message
                            })
                        }
                    })
                } else {
                    console.error('验证不通过');
                    return false;
                }
            })
        },
        handleCheckAllChange(val) { // 全选
            this.checkedTr = val ? this.checkedTrAll : [];
            this.isIndeterminate = false;
        },
        handleCheckedTrChange(value) { // 单选
            let checkedCount = this.checkedTr.length;
            this.checkAll = checkedCount === this.roomList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.roomList.length;
        },
        // 获取数据
        getList() {
            this.$https.get('/api/pms_sale_open/GetOpenDetails', {
                params: {
                    building_id: this.stepOne_form.building_id,
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    this.roomList = result.data.data.floors;
                    this.roomMaxLength = result.data.data.floor_max_room;
                    this.build_name = result.data.data.building_name;
                    this.checkedTrAll = [];
                    this.roomList.map(item => {
                        this.checkedTrAll.push(item.floor_id);
                        item.rooms.map(items => {
                            this.$set(items, 'active', false);
                            if (this.isEdit) { // 编辑模式

                            } else { // 新增模式
                                if (items.open_status !== 0) {
                                    items.open_status = 3;
                                }
                            }
                            
                        })
                    })
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        // 选中需要操作的td
        checkedRoom(item) {
            if (item.open_status !== 3) { // 状态不为3 就可以选择
                // 控制 active
                item.active = !item.active;
            }
        },
        checkedTrActive(arr, isChecked) {
            // arr 层
            for (let i of arr) {
                for (let floor of this.roomList) { // 遍历楼宇
                    if (i == floor.floor_id) { // 匹配到变化的层
                        for (let room of floor.rooms) {

                            if (isChecked) {
                                room.open_status !== 3 ? room.active = true : '';
                            } else {
                                room.open_status !== 3 ? room.active = false : '';
                            }
                            
                        }
                    }
                }
            }
        },
        ArrExcept(arrOne, arrTwo) { // 取数组差集
            let c = [];
            let tmp = arrOne.concat(arrTwo);
            let o = {};
            for (let i = 0; i < tmp.length; i ++) {
                (tmp[i] in o) ? o[tmp[i]] ++ : o[tmp[i]] = 1;
            }
            for (let x in o)
                if (o[x] == 1) c.push(x);
            return c;
        },
        isSale() {
            this.checkAllIsShow = false;
            for (let item of this.roomSelected) {
                item.open_status = 1;
                item.active = false;
            }
        },
        isReserve() {
            this.checkAllIsShow = false;
            for (let item of this.roomSelected) {
                item.open_status = 2;
                item.active = false;
            }
        },
        isCancel() {
            this.checkAllIsShow = false;
            for (let item of this.roomSelected) {
                item.open_status = 0;
                item.active = false;
            }
        },
        stepTwo_save() {
            this.$refs['stepOne_form'].validate((valid) => {
                if (valid) {
                    
                    let _rooms = {};
                    let _this = this;
                    this.roomList.map(item => {
                        this.checkedTrAll.push(item.floor_id);
                        item.rooms.map(items => {
                            if (_this.isEdit) { // 编辑
                                let _key = '' + items.room_id;
                                _rooms[_key] = items.open_status;
                            } else { //新增
                                if (items.open_status === 1 || items.open_status === 2) {
                                    let _key = '' + items.room_id;
                                    _rooms[_key] = items.open_status;
                                }
                            }
                        })
                    })

                    let _postData = JSON.parse(JSON.stringify(this.stepOne_form));
                    _postData.rooms = _rooms;
                    if (this.isEdit) {
                        _postData.open_id = this.editObj.id;
                    }
                    this.$https.post('/api/pms_sale_open/CommitOpenStatus', _postData).then((result) => {
                        if (result.data.code == 0) {
                            this.$message({
                                type: 'success',
                                showClose: true,
                                message: (this.isEdit ? '放盘修改成功' : '放盘成功'),
                                duration: 1000,
                                onClose: () => {
                                    // 关闭当前dialog，
                                    this.closeDialog();
                                    // 刷新列表
                                    this.$emit('parentGetDataList');
                                }
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: result.data.message
                            })
                        }
                    })
                } else {
                    console.error('验证不通过');
                    return false;
                }
            })
        },
        getProjects() { // 获取房产项目
            return this.$https.get('/api/pms_base_projects/GetProjects', {
                params: {
                    page: 1,
                    page_size: 999,
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    this.projects = result.data.data.Items;
                    console.log('获取了projects')
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        getBuildings(val) { // 获取楼宇
            let obj = this.projects.find((item)=>{
                return item.project_id === val;
            });
            console.log(this.projects)
            this.stepOne_form.project_name = obj.project_name;

            this.stepOne_form.building_id = ''
            return this.$https.get('/api/pms_base_buildings/GetBuildings', {
                params: {
                    page: 1,
                    page_size: 999,
                    project_id: this.stepOne_form.project_id
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    // 遍历项目
                    this.building = result.data.data.Items;
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        changeBuilding(val) {
            let obj = this.building.find((item)=>{
                return item.building_id === val;
            });
            this.stepOne_form.building_name = obj.building_name;
        },
        closeDialog(name) { // 关闭当前
            // this.$refs.form.resetFields(); // 重置表单
            if (!name) {
                this.$emit('closeDialog', 'dialogSellingAdd'); // 执行父组件关闭方法
                this.$emit('closeDialog', 'dialogSellingEdit'); // 执行父组件关闭方法
            } else {
                this.$emit('closeDialog', name); // 执行父组件关闭方法
            }
        }
    },
    computed: {
    }
}
</script>

<style scoped>
    .selling_rooms {
        width: 800px;
    }
    .selling_rooms_list {
        padding-bottom: 20px; 
        overflow-x: auto;
    }
    .statusTag {
        display: block;
        list-style: none;
        text-align: right;
    }
    .statusTag li {
        display: inline-block;
        margin-left: 5px;
    }
    .statusTag li i {
        border:1px solid #ebeef5;
    }
    .selling_table {
        border-spacing: 0;
        border-collapse: collapse;
        text-align: center;
    }
    .selling_table th {
        text-align: left;
    }
    .selling_table tr td:first-child {
        text-align: left;
        border: none; 
    }
    .selling_table th {
        padding: 2px;
        min-width: 80px;
        max-width: 80px;
    }
    .selling_table td {
        border: 1px solid #ebeef5;
        padding: 2px;
        min-width: 80px;
        max-width: 80px;
    }
    .selling_table td.room {
        cursor: pointer;
    }

    /* 状态 0-未放盘 1-可售 2-预留 disabled-已放盘 */ 
    .room.status0 {
        /* 未放盘 */
        background-color: #fff;
        color: #606266;
    }
    .room.status1 {
        /* 可售 */
        background-color: #409EFF;
        color: #fff;
    }
    .room.status2 {
        /* 预留 */
        background-color: #67c23a;
        color: #fff;
    }
    td.disabled {
        /* 已放盘 */
        background-color: #bbb;
        color: #fff;
    }
    .room.active {
        /* 预留 */
        background-color: #FFB840;
        color: #fff;
    }
</style>
